<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>技术交流</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../../css/mui.min.css" rel="stylesheet" />
    <link href="../../css/common.css" rel="stylesheet" />
    <link href="../../css/helper.css" rel="stylesheet" />
    <style>
      .mui-table-view-cell {
        padding: 0 0;
      }
      
      .list-item {
        height: 67px;
        border-radius: 3px;
        margin-bottom: 13px;
        background-color: #ffffff;
        padding-left: 16px;
        padding-right: 13px;
      }
      
      .card-img-box {
        /* margin-right:16px; */
        height: inherit;
        width: 33px;
      }
      
      .card-img {
        width: 33px;
        height: 33px;
      }
      
      .card-content-box {
        padding: 0 16px;
        width: 70%;
      }
      
      .txt1 {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      
      .txt2 {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      
      .img-tool-box {
        /* height:inherit; */
        width: 60px;
        /* flex: 1; */
      }
      
      .img-tool-box .imgs {
        display: inline-block;
        width: 20px;
        height: 20px;
      }
      
      .img-tool {
        width: 19px;
        height: 19px;
        /* margin-top:10px; */
      }
      
      .img-19 {
        width: 19px;
        height: 19px;
      }
      
      .mui-table-view {
        margin-top: 44px;
        background-color: inherit;
        padding-left: 13px;
        padding-right: 13px;
        padding-top: 13px;
      }
      
      .mui-table-view-cell:after {
        background-color: #ffffff;
        margin-bottom: 13px;
        background-color: #ffffff;
      }
      
      .hes {
        position: absolute;
        right: 0px;
        width: 44px;
        height: 44px;
        padding: 12px;
      }
    </style>
  </head>

  <body>
    <div id="container" v-cloak>
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">技术交流</h1>
        <div class="img-tool-box hes">
          <img src="../../img/knowledge/tianjia.png" class="img-tool fr" style="margin-left: 13px" @click="searchadd()" />
        </div>
      </header>
      <div class="mui-content">
        <!-- 1、slider items -->
        <div class="mui-bar mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
          <a class="mui-control-item" v-for="(v,i) in typeList" :key="v.id" :class="i==0?'mui-active':''" href="#item0" @tap="getSystemList(v)">{{v.label}}</a>
        </div>
        <div id="slider" class="mui-slider mui-fullscreen">
          <div class="tab-content mui-slider-group" id="tab-content">
            <div id="item0" class="mui-slider-item mui-control-content mui-active">
              <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                <div class="mui-scroll">
                  <!-- 2、列表 -->
                  <ul class="mui-table-view" id="tableitem">
                    <li class="mui-table-view-cell mui-media list-item f-r-b-c" v-for="(item,index) in systemList" :key="item.id" @tap="detail(item.id)">
                      <div class="card-img-box f-r-c-c">
                        <img src="../../img/wenjian.png" class="card-img" />
                      </div>
                      <div class="card-content-box fs">
                        <div class="txt1">
                          <span v-if="item.isTop">【置顶】</span>
                          <span v-if="item.isBest">【精华】</span> {{item.t}}
                        </div>
                        <div class="txt2">{{item.cn}}</div>
                      </div>
                      <div class="img-tool-box">
                        <span class="imgs" @tap.stop="downlonds(item)">
                          <img src="../../img/xiazai.png" class="img-tool fr" v-if="item.isDown">
                          <img src="../../img/xiazai1.png" class="img-tool fr" v-else>
                        </span>
                        <span class="imgs" v-if="item.ic" @tap.stop="addStore(item)" style="float: right">
                          <img
                            src="../../img/shoucang_yishoucang.png"
                            class="img-tool fr"
                            style="margin-left: 13px"
                        /></span>
                        <span class="imgs" v-else @tap.stop="addStore(item)" style="float: right"><img
                            src="../../img/shoucang_moren.png"
                            class="img-tool fr"
                            style="margin-left: 13px"
                        /></span>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../../../../js/mui.js"></script>
    <script src="../../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../../js/mui.pullToRefresh.material.js"></script>
    <!-- <script src="../../../../js/jquery-1.7.2.min.js"></script> -->
    <script type="text/javascript" src="../../../../js/jquery-3.2.1.min.js"></script>
    <script src="../../../../js/vue.js"></script>
    <script src="../../js/mkeyplus.base.js"></script>
    <script src="../../js/sqlite.js"></script>
    <script type="text/javascript">
      mui.init()
      if(window.plus) {
        plusready()
      } else {
        document.addEventListener("plusready", plusready, false)
      }

      function plusready() {
        mui.DB.openSqlite()
        vm.getType()
      }
      let vm = new Vue({
        el: "#container",
        data: {
          form: {
            page: 1,
            size: 20,
            system: "APP",
            status: 1,
          },
          ids: "",
          valid: "",
          typeForm: {},
          typeCodeName: "",
          systemList: [],
          typeList: [],
          downList: [],
          downType: [],
        },
        created: function() {

          // let techs=localStorage.getItem("techType")
          // if(techs){
          //   this.downType=JSON.parse(techs)
          // }
          // this.openSqlite()
        },
        methods: {
          getSystemList(v) {
            this.typeForm = v
            this.valid = v.value
            this.typeCodeName = v.label
            if(this.form.page === 1) {
              plus.nativeUI.showWaiting('加载中...');
            }
            mui.baseApp.httpRequst(
              "get",
              "/app/api/knowledge/experience", {
                page: this.form.page,
                size: this.form.size,
                typeCode: v.value,
              },
              (data) => {
                console.log("www", data)
                plus.nativeUI.closeWaiting();
                if(this.form.page == 1) {
                  this.systemList = []
                }
                this.isDwon(data)
                if(data.records.length < this.form.size) {
                  //
                  mui("#item0 .mui-scroll")
                    .pullToRefresh()
                    .endPullUpToRefresh(true) //参数为true代表没有更多数据了。
                  return
                } else {
                  mui("#item0 .mui-scroll")
                    .pullToRefresh()
                    .endPullUpToRefresh(false) //参数为true代表没有更多数据了。
                  mui("#item0 .mui-scroll").pullToRefresh().refresh(true) //启用上拉加载
                }
              },
              function() {
                // plus.nativeUI.closeWaiting()
                console.log("获取数据失败")
              }
            )
          },
          async isDwon(data) {
            let promiseAll = []
            data.records.forEach(item => {
              let tech = [{
                key: "id",
                value: item.id,
              }]
              console.log("技术交流", tech)
              promiseAll.push(mui.DB.selectTableData("technology", tech)
                .then((res) => {
                  if(res.length) {
                    item.isDown = true
                  } else {
                    item.isDown = false
                  }
                  console.log(item.isDown)
                })
                .catch((error) => {
                  item.isDown = false
                  console.log(error)
                }))
            })
            await Promise.all(promiseAll)
            console.log("333")
            this.systemList = this.systemList.concat(data.records)
          },
          getType() {
            mui.baseApp.httpRequst(
              "post",
              "/app/sys/dictItem/getDictDetail", {
                dictName: "Format"
              },
              (data) => {
                console.log("dd", data)
                this.typeList = data.data
                this.ids = this.typeList[0].id
                this.valid = this.typeList[0].value
                this.typeCodeName = this.typeList[0].label
                this.getSystemList(this.typeList[0])

                this.typeList.forEach((res) => {
                  mui.DB.createFormat("types", res, "code")
                  mui.DB.insertOrReplace("types", res)
                })
              },
              function() {
                // plus.nativeUI.closeWaiting()
                console.log("获取数据失败")
              }
            )
          },
          downlonds(item) {
            this.getDetils(item)
          },
          getDetils(item) {
            let that = this
            let ids = item.id
            plus.nativeUI.showWaiting('下载中');
            mui.baseApp.httpRequst(
              "post",
              "/app/api/knowledge/experience/detail/" + ids, {},
              function(data) {
                console.log("122", data.data)
                let des = data.data
                let parm = {
                  id: des.id,
                  typeCode: des.typeCode || "",
                  title: des.title || "",
                  content: des.content || "",
                  isShare: des.isShare || "",
                  isCollection: des.isCollection || "",
                  createId: des.createId || "",
                  createName: des.createName || "",
                  createTime: des.createTime || "",
                  updateTime: des.updateTime || "",
                  updateId: des.updateId || "",
                  typeCodeName: des.typeCodeName || "",
                  isLike: des.isLike || "",
                  fileDescribe: des.fileDescribe || "",
                  t: item.t || "",
                  cn: item.cn || "",
                  isTop: item.isTop || "",
                  isBest: item.isBest || "",
                }
                mui.DB.addColumn("technology", "isCollection").catch(err => {
                  console.log(err)
                })
                mui.DB.createFormat("technology", parm, "id")
                mui.DB.insertOrReplace("technology", parm)
                item.isDown = true
                plus.nativeUI.closeWaiting();
                mui.toast("操作成功");
              },
              function() {
                plus.nativeUI.closeWaiting()
                console.log("获取数据失败1")
              }
            )
          },
          setObj(arr) {
            console.log("arr", arr)
            let newArr = []
            let obj = {}
            for(var i = 0; i < arr.length; i++) {
              if(!obj[arr[i].id]) {
                newArr.push(arr[i])
                obj[arr[i].id] = true
              }
            }
            return newArr
          },
          addStore(item) {
            mui.baseApp.httpRequst(
              "post",
              "/app/api/knowledge/collection/add", {
                tagetId: item.id,
                type: 3,
              },
              function(data) {
                item.ic = !item.ic
                mui.toast("操作成功")
              }
            )
          },
          detail(id) {
            mui.baseApp.openWindow("./detail.html", {
              ids: id,
            })
          },
          searchadd() {
            mui.baseApp.openWindow("./add.html", {
              typeCode: this.valid,
              typeCodeName: this.typeCodeName,
            })
          },
        },
      });
      (function($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009
        $(".mui-scroll-wrapper").scroll({
          bounce: false,
          indicators: true, //是否显示滚动条
          deceleration: deceleration,
        })
        $.ready(function() {
          $(".mui-scroll").pullToRefresh({
            down: {
              callback: function() {
                var self = this
                setTimeout(function() {
                  vm.form.page = 1
                  vm.getSystemList(vm.typeForm)
                  self.endPullDownToRefresh()
                }, 1000)
              },
            },
            up: {
              callback: function() {
                var self = this
                setTimeout(function() {
                  mui.toast("11111")
                  console.log(index)
                  vm.form.page++
                    vm.getSystemList(vm.typeForm)
                  self.endPullUpToRefresh()
                }, 1000)
              },
            },
          })

          mui("#item0 .mui-scroll").pullToRefresh().endPullUpToRefresh(true)
          // mui("#item2 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
        })
      })(mui)

      window.addEventListener('collection', function(event) {
        let data = event.detail
        for(let i = 0; i < vm.systemList.length; i++) {
          let item = vm.systemList[i]
          if(item.id == data.id) {
            if(data.isDown != undefined) {
              item.isDown = data.isDown
            }
            if(data.isCollection != undefined) {
              item.ic = data.isCollection
            }
            break
          }
        }
      });
    </script>
  </body>

</html>